<template>
  <div class="hello">
    <h1>注册帐号</h1>
    <form>
      用户名：<input type="text" name="username" v-model="username"> <br>
      密码：<input type="password" name="password" v-model="password"> <br>
      昵称：<input type="text" name="nickname" v-model="nickname"> <br>
      <a href="javascript:;" @click="userRegister">注册</a>
      <hr>
      <hr>
      <h1>获取登录人信息</h1>
      <a href="javascript:;" @click="userGetInfo">获取登录人信息</a>
      <hr>
      <hr>
      <h1>获取所有数据</h1>
      <a href="javascript:;" @click="getAllUser">获取所有数据</a>
      <table>
        <tr>
          <th>id</th>
          <th>username</th>
          <th>nickname</th>
          <th>cTime</th>
        </tr>
        <tr v-for="(item, index) in allUserList" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.username}}</td>
          <td>{{item.nickname}}</td>
          <td v-text="_formatDate(item.cTime)"></td>
        </tr>
      </table>
    </form>
  </div>
</template>

<script>
  import md5 from 'md5'
  import {checkMinToMaxLenTxt, objArrIsNull, formatDate} from "../common/js/common";
  import {MsgSuccess, MsgError} from "../common/js/reset-iview";

  export default {
    name: 'hello',
    data () {
      return {
        msg: '新增用户',
        username: '',
        password: '',
        nickname: '',
        allUserList: [],
        getAllNum: 0
      }
    },
    methods: {
      userGetInfo () {
        this.$http.post('/api/user/getLoginInfo', {
          username: this.username
        }).then((res) => {
          var resData = res.data[0];
          if(objArrIsNull(resData)) return MsgError('帐号未注册')
          if(resData.username === this.username && resData.password === md5(this.password)) {
            MsgSuccess('login success')
          } else {
            MsgError('login error')
          }
        })
      },
      getAllUser () {
        this.$http.post('/api/user/getAllUser?size=2&p='+this.getAllNum, {}).then((res) => {
          this.allUserList = res.data;
          console.log(res.data);
          res.data.forEach((item) => {
            console.log(item.id);
          })
          this.getAllNum = this.getAllNum + 1;
        })
      },
      userRegister () {
        if(!checkMinToMaxLenTxt(this.username, 1, 10)) return MsgError("用户名必须大于2位小于10位");
        if(!checkMinToMaxLenTxt(this.password, 5, 30)) return MsgError("用户密码必须大于5位小于30位");
        if(!checkMinToMaxLenTxt(this.nickname, 1, 10)) return MsgError("真实姓名必须大于2位小于10位");

        this.$http.post('/api/user/register', {
          username: this.username,
          password: md5(this.password),
          nickname: this.nickname,
          cTime: parseInt(new Date().getTime()  / 1000)
        },{}).then((res) => {
          if(res.status == 200) {
            if(res.data.sqlState == 23000) {
              MsgError('用户名已经存在');
            } else {
              MsgSuccess('注册成功');
            }
          } else {
            MsgError('注册失败，请稍后再试');
          }
        })
      },
      _formatDate (date) {
        return formatDate(new Date(date * 1000), 'yyyy-M-d h:m:s')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.hello {
  padding: 10px;
}
h1, h2 {
  font-weight: normal;
}
h1 {
  margin: 10px 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
  padding: 10px;
  display: inline-block;
}
input {
  margin-bottom: 10px;
}
table {
  width: 100%;
  border: 1px solid #dbdbdb;
  border-bottom: none;
  border-right: none;
  text-align: center;
  border-spacing: 0;
}
th, td {
  line-height: 30px;
  border-bottom: 1px solid #dbdbdb;
  border-right: 1px solid #dbdbdb;
}
</style>
